import React, { useEffect, useState } from "react";
import { Input,} from "antd-mobile";
import Doctor from "./doctor"
import "./index.css";
import axios from "axios";
function Index(props) {
  const [text, settext] = useState("");
  const tabItems = [
    { key: "follow", title: "关注" },
    { key: "doctor", title: "医生" },
    { key: "hospital", title: "医院" },
  ];

  //判断是本地医生还是本地医院
  const [whether, setWhether] = useState(true);
  //全部医生
  //全部医院
  return (
    <div className="page flex-col">
      <div className="country_box_1 flex-row">
        <span className="country_text_1">9:31&nbsp;&nbsp;&nbsp;</span>
        <div className="country_box_2 flex-col" />
        <span className="country_text_2">4G</span>
        <img
          alt=""
          className="country_image_1"
          src={
            "https://lanhu.oss-cn-beijing.aliyuncs.com/psct1b5nferlc1qipenqnmpblu6t5k40gebb6537464-6f82-4562-8f55-1c8e2b6b0388"
          }
        />
      </div>
      <div
        className="country_box_3 flex-row justify-between"
        onClick={() => {
          props.history.push("/map")
        }}
      >
        <img
          alt=""
          className="country_icon_1"
          src={
            "https://lanhu.oss-cn-beijing.aliyuncs.com/pst9cnf5drdkql5mk8xjzz55jr3nrn9wte075d98e2-3832-4171-bbf8-87df8c173ecf"
          }
        />
        <span className="country_text_3">河南郑州</span>
      </div>
      <div className="country_box_4 flex-row justify-between">
        <div className="country_input_1 flex-row Input">
          <div className="country_icon_2 flex-col" />
          <Input
            className="country_text_4"
            style={{ flex: "auto" }}
            placeholder="搜医院、科室、医生、病症、药品"
            value={text}
            onChange={(val) => {
              settext(val);
            }}
          />
          <button
            className="country_button_1 flex-col"
            onClick={() => {
             console.log(text);
             axios.get(`/api/nation/findAllInfo?input=${text}`).then((res) => {
              console.log(res);
            });
            }}
          >
            <span className="country_text_5">搜索</span>
          </button>
        </div>
        <div className="country_icon_3 flex-col" />
      </div>
      <div className="country_box_5 flex-row">
        <div className="country_icon_4 flex-col">
          <img
            alt=""
            className="country_image_2"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/pshisso8i212otuk5s5iivw7uifohlgnted369db39-daf9-447a-afd0-3c6fce08fa3f"
            }
          />
        </div>
        <span className="country_text_6">&nbsp;预约挂号</span>
        <div className="country_group_1 flex-col" />
        <div className="country_image-wrapper_1 flex-col">
          <img
            alt=""
            className="country_image_3"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/ps7rn7aalgl6ota8lbfsev0o370cp9ow66k99f38560-23b2-4caa-8a09-bb27d61a5f74"
            }
          />
        </div>
        <span className="country_text_7">私人医生</span>
      </div>
      <div className="country_box_6 flex-row">
        <span
          className={whether ? "country_text_8 hosptailB" : "country_text_8"}
          onClick={() => {
            // console.log(e.target);
            // e.target.classList.add("hosptailB");country_text_8
            setWhether(true);
          }}
        >
          本地医院
        </span>
        <img
          alt=""
          className="country_image_4"
          src={
            "https://lanhu.oss-cn-beijing.aliyuncs.com/pshw3tf7g9539mfv5e3u4kssbjbx2rl7a83bcf482a-2449-46c4-9c47-011e6fe69ae1"
          }
        />
        <span
          className={whether ? "country_text_9" : "country_text_9 hosptailB"}
          onClick={() => {
            setWhether(false);
          }}
        >
          本地医生
        </span>
        <div className="country_image-text_1 flex-row justify-between">
          <span className="country_text-group_1">更多</span>
          <img
            className="country_icon_5"
            src={
              "https://lanhu.oss-cn-beijing.aliyuncs.com/psy3054tt19bqfyb41rlqthd71a8yzi360l78d34d8b-a019-4fe0-a3f0-e239d985ad01"
            }
          />
        </div>
      </div>
      <>
        {whether ? (
          <>
            <div className="country_box_7 flex-row"  onClick={() => {
           props.history.push('/hospitalList')
        }}>
              <div className="country_image-text_2 flex-col justify-between">
                <img
                  alt=""
                  className="country_image_5"
                  src={
                    "https://lanhu.oss-cn-beijing.aliyuncs.com/ps3bxff02upimys3xknb8qoigktrbc18wb9a48b67ab-0d40-43ef-9231-c4f14828c5f8"
                  }
                />
                <span className="country_text-group_2">距离我6.0km</span>
              </div>
              <div className="country_text-wrapper_1 flex-col">
                <span className="country_text_10">郑州大学第一附属医院...</span>
                <span className="country_text_11">综合医院</span>
                <span className="country_text_12">国基路与江山路交叉口</span>
              </div>
            </div>
            <div className="country_box_8 flex-col">
              <div className="country_box_9 flex-row">
                <div className="country_image-text_3 flex-row">
                  <div className="country_text-group_3 flex-col justify-between">
                    <div className="country_text-wrapper_2 flex-row">
                      <span className="country_text_13">
                        解放军联勤保障988医院
                      </span>
                    </div>
                    <div className="country_text-wrapper_3 flex-row justify-between">
                      <span className="country_text_14">2个科室</span>
                      <span className="country_text_15">2位医生</span>
                    </div>
                  </div>
                  <img
                    alt=""
                    className="country_image_6"
                    src={
                      "https://lanhu.oss-cn-beijing.aliyuncs.com/psi9tgw1g7dx1xupqy0jd1p5oy7wrumymkcb728ae6-c93a-4008-85b1-74deab65462a"
                    }
                  />
                </div>
                <span className="country_text_16">已服务216位患者</span>
              </div>
              <div className="country_text-wrapper_4 flex-row justify-between">
                <span className="country_text_17">距离我6.0km</span>
                <span className="country_text_18">郑上路602号</span>
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="doctor_list_1 flex-col" onClick={() => {
           props.history.push('/ddetail')
        }}>
              <div className="doctor_list-items_1-0 flex-col">
                <div className="doctor_group_6-0 flex-row">
                  <img
                    className="doctor_single-avatar_1-0 "
                    src={
                      "https://lanhu.oss-cn-beijing.aliyuncs.com/ps2uhfmpc5v3d6mrc2shr7dd8g8jpujqsqw7d600b8a-45db-4e98-8c7c-10c9581965ff"
                    }
                  />
                  <div className="doctor_group_7-0 flex-col justify-between">
                    <div className="doctor_group_8-0 flex-row">
                      <span className="doctor_text_10-0">王珏</span>
                      <span className="doctor_text_13-0">主任医师</span>
                      <div className="doctor_tag_2-0 flex-col">
                        <span className="doctor_text_14-0">三甲</span>
                      </div>
                    </div>
                    <span className="doctor_text_15-0">
                      郑州大学第一附属医院
                    </span>
                  </div>
                  <span className="doctor_text_16-0">骨科</span>
                </div>
                <span className="doctor_text_17-0">
                  擅长：腰椎间盘突出、腰椎管狭窄症、腰椎滑蜕、
                  <br />
                  颈椎病、胸椎管狭窄症、骨质疏松性椎体...
                </span>
              </div>
              <div className="doctor_list-items_1-1 flex-col">
                <div className="doctor_group_6-1 flex-row">
                  <img
                    className="doctor_single-avatar_1-1"
                    src={
                      "https://lanhu.oss-cn-beijing.aliyuncs.com/psr2vt9bucwa14mj71thdphzvedx2upuqg18fe1b50-609f-4eff-9a12-905d2dc1a9a5"
                    }
                  />
                  <div className="doctor_group_7-1 flex-col justify-between">
                    <div className="doctor_group_8-1 flex-row">
                      <span className="doctor_text_10-1">刘秋亮</span>
                      <span className="doctor_text_11-1">主任医师</span>
                      <div className="doctor_tag_1-1 flex-col">
                        <span className="doctor_text_12-1">三甲</span>
                      </div>
                    </div>
                    <span className="doctor_text_15-1">
                      郑州大学第一附属医院
                    </span>
                  </div>
                  <span className="doctor_text_16-1">儿科门诊</span>
                </div>
                <span className="doctor_text_17-1">
                  擅长：小二重症多发创伤/小儿运动系统畸形、
                  <br />
                  小儿发育性髋关节脱位、小儿骨肿瘤...
                </span>
              </div>
            </div>
          </>
        )}
      </>

      <div className="country_box_10 flex-col">
        <Doctor props={{props}} />
        <div className="country_group_2 flex-col" />

        </div>
    </div>
  );
}

export default Index;
